<template>
  <div>
    <form action="/">
      <van-search
          v-model="valueSearch"
          show-action
          placeholder="请输入搜索关键词"
          input-align="center"
          @search="onSearch"
          @cancel="onCancel"
      />
    </form>
  </div>
  <div class="business-list">
  <van-card
      v-for="business of businessList"
      :title="business.businessName"
      :desc="'起送 ¥'+business.starPrice+' 配送 约 ¥'+business.deliveryPrice"
      :thumb="business.businessImg"
      @click="$router.push(`/business/detail?businessId=${business.businessId}`)"
  >
    <template #tags>
      <van-tag plain type="primary" style="color: #fa6d31;background-color: #fdefab">{{ business.businessExplain }}</van-tag>
      <van-tag plain type="primary" style="color: #fa6d31;background-color: #fdefab">精选好店</van-tag>
    </template>
  </van-card>
  </div>
</template>

<script>
  import axios from "axios";
  import { ref } from 'vue';
  import { showToast } from "vant";

  export default {
    name: "list",
    data() {
      return {
        valueSearch: '',
        showCards: true,
        businessList: [],
      }
    },
    methods: {
      _initBusinessList() {
        axios.get('/ele_server_war/business/list').then(({data: res}) => {
          if (res.status === 0) {
            this.businessList = res.data
          } else {
            alert(res.message)
          }
        })
      },
      onSearch() {
        this.$router.push(`/business/listSearched?businessName=${ this.valueSearch }`)
      },
      onCancel() {
        showToast('取消');
      },
    },
    setup() {
      const valueSearch = ref('');
      return { valueSearch };
    },
    created() {
      this._initBusinessList()
    }
  }
</script>

<style scoped lang="stylus">

</style>